<template>
    <div class="mobile-login">
        <a-form
            ref="formRef"
            name="mobileLogin"
            :model="formState"
            label-align="right"
            :labelCol="{span: 6, offset: 0}"
            :rules="checkRules"
        >
            <a-form-item has-feedback label="手机号" name="mobile" required>
                <a-input v-model:value="formState.mobile" type="text" autocomplete="off" />
            </a-form-item>

<!--            <a-form-item label="验证码" name="captcha" required class="mobile-code-item" >
                <a-input v-model:value="formState.captcha" type="text" autocomplete="off" :min="4" :max="4"/>
                <a-button type="primary" >获取验证码</a-button>
            </a-form-item>-->

            <a-form-item label="验证码" name="captcha" required class="mobile-code-item" >
                <a-row>
                    <a-col :span="12">
                        <a-input v-model:value="formState.captcha" type="text" autocomplete="off" :min="4" :max="4"/>
                    </a-col>
                    <a-col :span="11" :offset="1">
                        <a-button type="primary" >获取验证码</a-button>
                    </a-col>
                </a-row>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";
import {MobileLoginState, rules} from "@v/login/config/mobile-login";
import {FormInstance} from "ant-design-vue";

const formState: MobileLoginState = reactive({
    mobile: "",
    captcha: ""
})

const formRef = ref<FormInstance>();

const checkRules = reactive(rules)

const loginHandler = () => {
    console.log("手机号登陆开始～")
    formRef.value?.validate().then(valid => {
        if (!valid){
            Promise.reject("")
        }
    }).catch(error => {
        return false;
    })
}
defineExpose({
    loginHandler
})

</script>

<style scoped lang="less">
.mobile-login{
    :deep(".ant-form-item-control-input-content"){
        display: flex !important;
    }

    :deep(.ant-form-item-explain-error){
        font-size: 12px;
    }
}

</style>
